<!-- @format -->
<template>
  <!-- 表格 -->
  <!-- <div> -->
  <el-table-column
    :header-align="column.headerAlign || 'center'"
    v-bind="column.props"
    :prop="column.prop"
    :render-header="column.labelrender"
    :label="column.label"
    :align="column.align || align"
    :width="column.width"
    :fixed="column.fixed"
    v-if="(!column.isShow || (column.isShow && column.isShow())) && column.show == true"
    :sortable="column.sortable || false"
    :sort-method="column.sortMethod"
    :sort-orders="column.sortOrders"
  >
    <template v-if="column.column && column.column.length > 0">
      <table-columns v-for="(item, index) in column.column" :column="item" :key="index + 'chlid'">
     </table-columns>
    </template>
    <template slot-scope="scope">
      <template v-if="column.isEdit ? column.isEdit : false || scope.row.rowEdit">
        <NuEditableCell :show-input="scope.row.editable" v-model="scope.row[column.prop]" :placeholder="column.prop">
          <span slot="content">{{ scope.row[column.prop] }}</span>
        </NuEditableCell>
      </template>
      <template v-else>
        <template v-if="!column.render">
          <template v-if="column.formatter">
            <span
              v-html="column.formatter(scope.row, column, scope.$index)"
              @click="column.click && column.click(scope.row, scope.$index)"
            ></span>
          </template>
          <template v-else-if="column.newjump">
            <router-link
              class="newjump"
              type="primary"
              :underline="false"
              v-bind="{ target: '_blank', ...column.target }"
              :to="column.newjump(scope.row, column, scope.$index)"
              >{{ scope.row[column.prop] || column.content }}</router-link
            >
          </template>
          <template v-else>
            <span
              :style="column.click ? 'color: #409EFF; cursor: pointer;' : null"
              @click="column.click && column.click(scope.row, scope.$index)"
            >
              {{ getTwoNum(scope.row[column.prop]) }}
              {{ `${scope.row[column.prop] && column.unit ? column.unit : ''}` }}
            </span>
          </template>
        </template>
        <template v-else>
          <render :column="column" :row="scope.row" :render="column.render" :index="scope.$index"></render>
        </template>
      </template>
    </template>
  </el-table-column>
  <!-- </div> -->
</template>
<script>
export default {
  name: 'tableColumns',
  props: {
    column: {
      type: Object,
    },
    index: Number,
    align: {
      type: String,
      default: () => 'center',
    },
  },
  created() {
    // console.log(this.align);
  },
  methods: {
    isNum(val) {
      return typeof val === 'number' && !isNaN(val);
    },
    getTwoNum(val) {
      if (val == undefined || val == null || val == NaN) {
        return '';
      } else if (this.isNum(val)) {
        return Math.round(val * 100000000) / 100000000;
        // return val;
      } else {
        return val;
      }
    },
  },
  components: {
    render: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
        },
      },
      render: (h, opt) => {
        const params = {
          row: opt.props.row,
          index: opt.props.index,
        };
        if (opt.props.column) params.column = opt.props.column;
        return opt.props.render(h, params);
      },
    },
  },
};
</script>
<style scoped>
.el-table {
  background-color: #edeefe;
}
/* 表头单元格样式 */
.el-table ::v-deep th.el-table__cell {
  background-color: var(--table-header-bgc-color);
  text-align: var(--table-header-text-align) !important;
}
/* 表格内容样式 */
.el-table ::v-deep tbody {
  font-size: var(--table-fontSize);
}
/* 表头样式 */
.el-table ::v-deep thead {
  height: var(--table-header-height);
  box-shadow: var(--table-header-bgc-opacity);
}
/* 鼠标悬停时表格行样式 */
.el-table ::v-deep .el-table__body-wrapper tr:hover {
  color: var(--table-focus-color);
}
/* 表格偶数行样式 */
.el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 0) {
  background-color: var(--table-bgc-1) !important;
}
/* 表格奇数行样式 */
.el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 1) {
  background-color: var(--table-bgc-2) !important;
}
</style>
